<template>
	<view class="patrol_style" scroll-y="false">
		<view class="topSearch">
			<u-search placeholder="请输入工单主题" v-model="keyword" :animation="false" :showAction="false"></u-search>
		</view>
		<view class="dropdown_top">
			<zb-dropdown-menu style="width: 50%">
				<zb-dropdown-item name="类型" :options="option" v-model="fication" @change="ficationChange"></zb-dropdown-item>
			</zb-dropdown-menu>
			<zb-dropdown-menu style="width: 50%">
				<zb-dropdown-item name="全部" :options="option" v-model="fication" @change="ficationChange"></zb-dropdown-item>
			</zb-dropdown-menu>
		</view>

		<scroll-view @scrolltolower="loadMoreData" scroll-y="true" enable-back-to-top="true" lower-threshold="112" class="scrollbox">
			<view @click="contentBtnok" class="content_scroll" v-for="(item, index) in data" :key="index">
				<view class="content_top">
					<view>
						<image style="width: 50rpx; height: 50rpx" src="../../../static/mappages/patrol/xc.png" mode=""></image>
						<text style="margin-left: 20rpx">{{ item.name }}</text>
					</view>
					<view>
						<text :style="{ color: item.type == '交办中' ? '#90e482' : '#78b0fb' }" style="margin-right: 20rpx">{{ item.type }}</text>
					</view>
				</view>
				<view class="content_center">
					<view class="content_centerFlex">
						<view class="formgroup">{{ item.text }} :</view>
						<view class="groupholder">{{ item.text }}</view>
					</view>
					<view class="content_centerFlex">
						<view class="formgroup">{{ item.text }} :</view>
						<view class="groupholder">{{ item.text }}</view>
					</view>
					<view class="content_centerFlex">
						<view class="formgroup">{{ item.text }} :</view>
						<view class="groupholder">{{ item.text }}</view>
					</view>
					<view class="content_centerFlex">
						<view class="formgroup">{{ item.text }} :</view>
						<view class="groupholder">{{ item.text }}</view>
					</view>
					<view class="content_centerFlex">
						<view class="formgroup">{{ item.text }} :</view>
						<view class="groupholder">{{ item.text }}</view>
					</view>
				</view>
				<!-- 	<view class="content_button">
					<u-album :urls="item.img"></u-album>
				</view> -->
			</view>
		</scroll-view>
		<!-- 巡查时间 -->
		<!-- <uni-fab horizontal="right" vertical="bottom" ref="fab" @fabClick="fabClick" /> -->
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			keyword: '',
			albumWidth: 0,
			urls1: ['https://cdn.uviewui.com/uview/album/1.jpg', 'https://cdn.uviewui.com/uview/album/2.jpg', 'https://cdn.uviewui.com/uview/album/3.jpg'],
			fication: 4, //整改状态
			option1: [
				{
					text: '选择时间',
					value: 0
				}
			],
			option: [
				{
					text: '交办中',
					value: 0
				},
				{
					text: '已登记',
					value: 1
				},
				{
					text: '已整改',
					value: 2
				},
				{
					text: '已退回',
					value: 3
				},
				{
					text: '整改状态',
					value: 4
				}
			],
			data: [
				{
					name: '江紫冰',
					date: '2023-12-03 15:35',
					type: '交办中',
					text: '某河堤坝',
					value: '文章对地勘单位效益承包中存在的问题进行了分析，并针对承包思路、办法、形式和承包环节等方面提出了整改意见',
					img: ['https://cdn.uviewui.com/uview/album/1.jpg', 'https://cdn.uviewui.com/uview/album/2.jpg', 'https://cdn.uviewui.com/uview/album/3.jpg']
				},
				{
					name: '江紫冰',
					date: '2023-12-03 15:35',
					type: '交办中',
					text: '某河堤坝',
					value: '文章对地勘单位效益承包中存在的问题进行了分析，并针对承包思路、办法、形式和承包环节等方面提出了整改意见',
					img: ['https://cdn.uviewui.com/uview/album/1.jpg', 'https://cdn.uviewui.com/uview/album/2.jpg', 'https://cdn.uviewui.com/uview/album/3.jpg']
				},
				{
					name: '江紫冰',
					date: '2023-12-03 15:35',
					type: '交办中',
					text: '某河堤坝',
					value: '文章对地勘单位效益承包中存在的问题进行了分析，并针对承包思路、办法、形式和承包环节等方面提出了整改意见',
					img: ['https://cdn.uviewui.com/uview/album/1.jpg', 'https://cdn.uviewui.com/uview/album/2.jpg', 'https://cdn.uviewui.com/uview/album/3.jpg']
				}
			]
		};
	},
	methods: {
		// 触底刷新事件
		loadMoreData() {
			// this.query.goods.pageNum += 1;
			// !this.study.isBoolean ? '' : this.orderEarnings();
			console.log('触底更22新');
		},
		//整改状态
		ficationChange() {
			// this.patrolShow = true;
		},
		patrolConfirm(e) {
			this.patrol = e[0] + '-' + e[e.length - 1];
			this.patrolShow = false;
		},
		//河道巡查 点击事件
		contentBtnok(item) {
			console.log(item, '河道巡222查');
			this.$tab.navigateTo('/mappages/equipment/task/details/details');
		},
		// fabClick() {
		// 	this.$tab.navigateTo('/mappages/equipment/manage/added/added');
		// }
	},
	onLoad(options) {
		setTimeout(function () {
			console.log('start pulldown');
		}, 1000);
		uni.startPullDownRefresh();
	},
	onPullDownRefresh() {
		console.log('下拉刷新');
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	}
};
</script>

<style scoped>
.scrollbox {
	height: calc(100vh - 260rpx);
}
.example-body {
	padding: 12px;
	background-color: #ffffff;
}

.result-box {
	text-align: center;
	padding: 20px 0px;
	font-size: 16px;
}

.patrol_style {
	/* padding: 20rpx; */
	width: 100%;
	overflow-y: hidden;
}

.dropdown_top {
	display: flex;
}

.content_scroll {
	margin-top: 5rpx;
	width: 100%;
	background-color: #fff;
	padding: 22rpx;
}

.content_top {
	display: flex;
	justify-content: space-between;
}

.content_top view {
	display: flex;
	align-items: center;
}

.content_center {
	display: flex;
	flex-direction: column;
	color: #000;
}
.content_centerFlex {
	display: flex;
	flex-direction: row;
	align-items: center;
	color: #666666;
	height: 50rpx;
}
.formgroup {
}
.groupholder {
	margin-left: 22rpx;
}
.content_button {
	margin: 20rpx 0;
}

.album {
	@include flex;
	align-items: flex-start;

	&__avatar {
		background-color: $u-bg-color;
		padding: 5px;
		border-radius: 3px;
	}

	&__content {
		margin-left: 10px;
		flex: 1;
	}
}

.topSearch {
	/* margin-top: 10rpx; */
	padding: 10rpx;
	background-color: #fff;
}
</style>
